<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <h1>cros跨域</h1>
  <button>提交请求</button>
  <script>
    /* 
      ajax请求分为简单请求和复杂请求:
        简单请求:
          - get和post默认都属于简单请求
          - 并且http的头部信息中不能超出以下字段
            - Accept
            - Accept-language
            - Content-Type:值只能是 'application/x-www-form-urlencoded'
        复杂请求:
          - 不属于简单请求的,都称作为复杂请求
          - put和delete都属于复杂请求
          - 只要添加额外请求头的也是属于复杂请求

        复杂请求再跨域的情况下,会先发送一个空的body的OPTIONS预检请求(查看服务器的权限信息)
    */
    const oBut = document.querySelector('button')
    //实列化并配置对象
    const myAxios = axios.create({
      baseURL:'http://127.0.0.1:8100',//设置公共路径
      setTimeout:10000, //设置超时事件
      headers:{     //设置公共请求头
        token:'dsagasjfsanf.sahfoangkhgaslng'
      }
    })
    oBut.onclick =async function () {
      const re =await myAxios.get("/userCros", {
        params: {
          userId: "001"
        }
      })
      console.log('re',re.data.data);//打印响应的数据
    }
  </script>
</body>

</html>